<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
            flex-direction: column;
            filter: contrast(30);
        }
 
        .drop {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            filter: blur(20px);
            opacity: 0;
            animation: 2.5s drop linear infinite;
        }
 
       
 
        .collection {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            filter: blur(20px);
            animation: 3s colleation linear infinite;
        }
 
        span {
            position: absolute;
            font-size: 20px;
            font-weight: 500;
            color: #000;
        }
        /* 给水滴添加动画延时，避免三个水滴同时掉落 */
        .drop:nth-child(2) {
            animation-delay: .5s;
        }
 
        .drop:nth-child(3) {
            animation-delay: .7s;
        }
        /* 水滴掉落动画 */
        @keyframes drop {
            0% {
                transform: scale(0.7) translateY(-600%);
                opacity: 0;
            }
 
            50% {
                transform: scale(0.4) translateY(-80%);
                opacity: 1;
            }
 
            100% {
                transform: scale(0.3) translateY(0px);
            }
        }
 
        /* 收集水滴的盒子添加的蠕动效果 */
        @keyframes colleation {
            0% {
                transform: scale(1) rotate(0deg);
            }
 
            50% {
                transform: scale(1.3) rotate(180deg);
                width: 90px;
            }
 
            100% {
                transform: scale(1) rotate(360deg);
            }
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="collection"></div>
        <span>80%</span>
    </div>
 
</body>
 
</html>